<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 导入 vue 的依赖 核心的vue3的js文件 -->
     <!-- 打开网站：http://unpkg.com/vue@3/dist/vue.global.js 
             将里面的所有内容粘贴到 js/vue.js 中
     -->
    <script src = "./js/vue.js"></script>
</head>
<body>
    <div id = "app">
        <h1 v-text = "message" v-bind:style="colorStyle"></h1>
        <h1>{{message}}</h1>
        <button @click="fun1()">change</button>
    </div>

    <script>
        const app = Vue.createApp({
            setup(){
                // 定义数据 以变量/对象的形式
                let message = "hello"
                let headline = "vue"
                let colorStyle = {"background-color":"blue"}
                function fun1(){
                    alert("hello")
                }
                // 载 return 中返回变量/方法 才能够和 HTML 元素关联
                return {
                    message,
                    headline,
                    colorStyle,
                    fun1
                }
            }
        })
        // 将 app 对象挂载在指定的元素上，被挂载的元素内部就可以通过 vue 框架实现数据的渲染了
        app.mount("#app")
    </script>
</body>
</html>